﻿@model Sheng.WeixinConstruction.Client.Shell.Models.LuckyTicketViewModel

@{
    ViewBag.SubTitle = "活动";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<style type="text/css">
    body {
        margin-bottom: 0.55rem;
    }

    .campaignName {
        font-size: 0.14rem;
        font-weight: bold;
    }

    .campaignDescription {
        font-size: 0.13rem;
        color: #666;
    }

    #divMemberInfo {
        font-size: 0.14rem;
        line-height: 0.14rem;
        text-align: center;
        margin-top: 0.05rem;
    }

   

    #divShareMask {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        text-align: right;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }

    .divLuckyTicketItem {
        text-align: center;
        font-size: 0.2rem;
        color: #FF7F00;
        background-image: url(/Content/Images/bg_star.jpg);
        background-repeat: repeat;
        padding-top: 0.05rem;
        padding-bottom: 0.05rem;
        margin-bottom: 0.05rem;
    }

     #divFooter {
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            height: 0.4rem;
            font-size: 0.14rem;
            text-align: center;
            background-color: #F5F5F5;
        }
</style>

<script>

    var _currentPage = 1;
    var _totalPage = 1;
    var _status = @((int)Model.CampaignBundle.Campaign.Status);
    var _campaignId = getQueryString("campaignId");

    $(document).ready(function () {
        $(document).scroll(function () {
            $("#divShareMask").css("top", document.body.scrollTop);
        });

        var jsApiConfigStr = "@Newtonsoft.Json.JsonConvert.SerializeObject(Model.JsApiConfig)";
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("&quot;", "gm"), "\"");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\r\n", "gm"), "");
        jsApiConfigStr = jsApiConfigStr.replace(new RegExp("\n", "gm"), "");
        var jsApiConfig = eval('(' + jsApiConfigStr + ')');

        wx.config(jsApiConfig);

        loadData();
    });

    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '@Model.CampaignBundle.Campaign.ShareTimelineTitle', // 分享标题
            link: '@Request.Url.Scheme://@Request.Url.Host/Campaign/LuckyTicketShare/@Model.CampaignBundle.Campaign.Domain?campaignId=@Model.CampaignBundle.Campaign.Id&memberId=@ViewBag.Member.Id', // 分享链接
            imgUrl: '@Model.CampaignBundle.Campaign.ShareImageUrl', // 分享图标
            success: function () {
                shareSuccess("ShareTimeline");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: '@Model.CampaignBundle.Campaign.ShareAppMessageTitle', // 分享标题
            desc: '@Model.CampaignBundle.Campaign.ShareAppMessageDescription', // 分享描述
            link: '@Request.Url.Scheme://@Request.Url.Host/Campaign/LuckyTicketShare/@Model.CampaignBundle.Campaign.Domain?campaignId=@Model.CampaignBundle.Campaign.Id&memberId=@ViewBag.Member.Id', // 分享链接
            imgUrl: '@Model.CampaignBundle.Campaign.ShareImageUrl', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                shareSuccess("ShareAppMessage");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });

    wx.error(function (res) {
        alert("error:" + res);
    });

    function shareSuccess(type) {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/" + type + "/@ViewBag.Domain.Id?campaignId=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    if (resultObj.Point == 0)
                        return;

                    var msg = "";
                    if (resultObj.Point > 0) {
                        msg += "获得积分：" + resultObj.Point;
                    }
                    if (msg != "") {
                        layerAlertBtn(msg);
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadData(targetPage) {

        if (targetPage > _totalPage)
            return;

        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PageSize = 10;
        args.CampaignId = _campaignId;

        $.ajax({
            url: "/Api/Campaign/GetLuckyTicketLogList/@ViewBag.Domain.Id",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;
                    _totalPage = resultObj.TotalPage;
                    if (_currentPage >= _totalPage)
                    {
                        $("#divPagingContainer").html("没有更多了");
                    }

                    if(_currentPage==1)
                    {
                        document.getElementById('ticketNumberItemContainer').innerHTML = "";
                    }

                    $("#spanTotalCount").html(resultObj.TotalCount);

                    var gettpl = document.getElementById('ticketNumberItemTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('ticketNumberItemContainer').innerHTML += html;
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showDrawResult(){
        window.location.href= "/Campaign/LuckyTicketDrawResult/@ViewBag.Domain.Id?campaignId=" + _campaignId
    }

    function showCampaignDescription() {
        var loadLayerIndex = layer.open({
            type: 2,
            shadeClose: false,
            content: '请稍候...'
        });

        $.ajax({
            url: "/Api/Campaign/GetCampaignDescription/@ViewBag.Domain.Id?id=" + _campaignId,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    var gettpl = document.getElementById('campaignDescription').innerHTML;

                    laytpl(gettpl).render(resultObj, function (html) {
                        var pageii = layer.open({
                            type: 1,
                            content: html,
                            shadeClose: false,
                            style: 'position:fixed; left:0.1rem; top:0.1rem;right:0.1rem; bottom:0.1rem; border:none;'
                        });
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                //alert("Error: " + xmlHttpRequest.status);
            }
        });

    }

    function showShareMask() {
        $("#divShareMask").css("top", document.body.scrollTop);
        $("#divShareMask").show();
        $("#divFooter").hide();
    }

    function hideShareMask() {
        $("#divShareMask").hide();
        $("#divFooter").show();
    }


</script>

<script type="text/html" id="campaignDescription">
    <div style="position: fixed; top: 0.1rem; left: 0.1rem; right: 0.1rem; bottom: 0.45rem; overflow: auto;">
        {{ d }}
    </div>
    <div style="position: fixed; bottom: 0.1rem; left: 0.1rem; right: 0.1rem;">
        <div class="divRectangle_Gray" style="margin-top: 0.1rem; " onclick="layer.closeAll()">
            关 闭
        </div>
    </div>
</script>

<script type="text/html" id="ticketNumberItemTemplate">
    {{# for(var i = 0, len = d.length; i < len; i=i+1){ }}
    <div class="divLuckyTicketItem">
        {{ d[i].TicketNumber }}
    </div>
    {{# } }}
</script>




<div id="divImageContainer">
    <img src="@Model.CampaignBundle.Campaign.ImageUrl" name="img" id="img" style="width: 100%;">
</div>

<div class="divContent">
    <div style="margin-top: 0.06rem" class="campaignName">
        @Model.CampaignBundle.Campaign.Name
    </div>
    <div style="margin-top: 0.06rem" class="campaignDescription">
        @Html.Raw(Model.CampaignBundle.Campaign.Introduction)
    </div>

    @if (Model.WinLogList != null && Model.WinLogList.Count > 0)
    {
        <div style="margin-top:0.15rem;padding-left:0.1rem;padding-right:0.1rem; padding-top:0.1rem;padding-bottom:0.1rem;
            background-color:#FFE6E6;border: 1px solid #FF4D4D;font-size:0.13rem;">
            <div style="font-weight:bold;color:#FF0000">
                恭喜中奖！
            </div>
            <div style="margin-top:0.05rem;color:#545454">
                您有 @Model.WinLogList.Count 个号码被抽中：
            </div>
            <div style="font-size:0.15rem;">
                @foreach (Sheng.WeixinConstruction.Infrastructure.Campaign_LuckyTicketLogEntity item in Model.WinLogList)
                {
                    <div style="margin-top:0.05rem;">
                        <div style="float:left;color:#FF4C4C;font-weight:bold">
                            @item.TicketNumber
                        </div>
                        <div style="float:right;color:#545454;">
                            @item.WinRemark
                        </div>
                        <div style="clear:both"></div>
                    </div>
                }
            </div>
        </div>
    }
    else
    {
        <div style="margin-top:0.15rem;padding-left:0.1rem;padding-right:0.1rem; padding-top:0.1rem;padding-bottom:0.1rem;
            background-color:#FFE6E6;border: 1px solid #FF4D4D;font-size:0.13rem;">
            <div style="margin-top:0.05rem;color:#545454">
                如果您的号码中奖，将直接显示在这里。
            </div>
        </div>
    }

    <div style="margin-top:0.1rem; margin-bottom:0.1rem;font-size:0.13rem;" onclick="goUrl('/Home/PersonalInfo/@ViewBag.Domain.Id')">
        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:0.6rem;"><img src="/Content/Images/personalIcon.png" style="width:0.5rem;"></td>
                <td>点这里完善个人信息<br />以便中奖后工作人员与您联系</td>
            </tr>
        </table>
    </div>
    <div class="divDotLine" style="margin-top:0.05rem; margin-bottom:0.1rem;">
    </div>
    @*<div style="text-align:center">
            <div class="divVote" style="margin-top: 0.1rem;" onclick="showCampaignDescription()">
                查看活动详情
            </div>
        </div>*@

    <div style="text-align: center; margin-top: 0.1rem;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="33%" align="center">
                    参与人数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.MemberCount</span>
                </td>
                <td width="33%" align="center">
                    总号码数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.LuckyTicketCount</span>
                </td>
                <td width="33%" align="center">
                    围观次数<br />
                    <span class="defaultColor" style="font-weight:bold">@Model.DataReport.PageVisitCount</span>
                </td>
            </tr>
        </table>
    </div>

    <div class="divDotLine" style="margin-top:0.05rem; margin-bottom:0.1rem;">
    </div>
    <div id="divMemberInfo" onclick="showShareMask()">
        <table border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td align="left" style="width:0.3rem"><img src="/Content/Images/shareTimeLine.jpg" style="width:0.2rem;"></td>
                <td align="left"><div style="line-height:0.2rem">点击这里分享本页试一试~</div></td>
            </tr>
        </table>
    </div>

    <div style="text-align: center;margin-top:0.1rem;">
        共有 <span class="font_red_b" id="spanTotalCount">0</span> 个小伙伴为你筹集抽奖号码
    </div>

    <div style="margin-top:0.2rem;" id="ticketNumberItemContainer">

    </div>

    <div id="divPagingContainer" class="divPagingContainer" style="margin-top:0.1rem; text-align:center" onclick="loadData(_currentPage+1)">
        查看更多
    </div>

   
</div>

<div id="divFooter">
    <table align="center" border="0" style="height:100%;width:100%">
        <tr>
            <td valign="middle" align="center" width="50%">
                <input name="" type="button" class="button" value="活动说明" style="width:90%" onclick="showCampaignDescription()">
            </td>
            <td valign="middle" align="center" width="50%">
                <input name="" type="button" class="button" value="开奖信息" style="width:90%" onclick="showDrawResult()">
            </td>
        </tr>
    </table>
</div>

<div id="divShareMask" style="display:none" onclick="hideShareMask()">
    <img src="/Content/Images/share.PNG" width="200" height="145">
</div>
